<template>
  <div>
    <template>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="身份证照:">
          <el-upload action="http://localhost/dev-api/driver/driver/upLoad" list-type="picture-card"
                     :on-preview="handlePictureCardPreview1" :on-success="success1">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible1">
            <img width="100%" :src="driverIdpic" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item label="用户昵称:">
          <el-input v-model="akaName"></el-input>
        </el-form-item>
        <el-form-item label="司机名称:" >
          <el-input v-model="form.driverName" :disabled="inputDisabled"></el-input>
        </el-form-item>

        <el-form-item label="司机性别:"  >
          <el-input v-model="form.driverGender"  :disabled="inputDisabled"></el-input>
        </el-form-item>

        <el-form-item label="司机电话:">
          <el-input v-model="form.driverTell"></el-input>
        </el-form-item>

        <el-form-item label="住址:" >
          <el-input v-model="form.driverAddress" :disabled="inputDisabled"></el-input>
        </el-form-item>

        <el-form-item label="身份证号:"  >
          <el-input v-model="form.driverIdcard" :disabled="inputDisabled"></el-input>
        </el-form-item>

        <el-form-item label="简介:">
          <el-input v-model="form.driverIntro"></el-input>
        </el-form-item>
        <el-form-item label="司机照片:">
          <el-upload action="http://localhost/dev-api/driver/driver/upLoad" list-type="picture-card"
                     :on-preview="handlePictureCardPreview" :on-success="success"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="driverPic" alt="">
          </el-dialog>
        </el-form-item>

        <el-form-item label="驾照正面:">
          <el-upload action="dev-api/driver/driver/upLoad" list-type="picture-card"
                     :on-preview="handlePictureCardPreview2" :on-success="success2"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible2">
            <img width="100%" :src="driverCarpic" alt="">
          </el-dialog>
        </el-form-item>

        <el-form-item>
          <el-tooltip class="item" effect="dark" content="请先选择车辆" placement="top">
            <el-button type="primary" @click="onSubmit" :disabled="isDisabled">立即注册</el-button>
          </el-tooltip>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </template>
    <el-button type="text" @click="dialogTableVisible = true">选择公司车辆</el-button>
    <el-dialog title="选择公司车辆" :visible.sync="dialogTableVisible">
      <template>
        <template>
          <el-table :data="carMessage" style="width: 100%">
            <el-table-column label="车辆编号" width="180">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.vehicleId }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini" @click="choiceCar(scope.row.vehicleId)">选择此车</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </template>
    </el-dialog>
  </div>

</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import { getUserProfile } from '@/api/system/user'
import { queryDriverByIdCard, registerDriver, selectAllVehicleBaseInfo, upLoadOcr } from '@/api/driver/driver'
import { getInfo } from '@/api/login'

export default {
  //import引入的组件需要注入到对象中才能使用"
  components: { getUserProfile },
  props: {},
  data() {
    //这里存放数据"

    return {
      akaName:'',
      inputDisabled: true,
      isDisabled: true,
      multipleSelection: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      carMessage: [],
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      driverPic: '',
      driverCarpic: '',
      driverIdpic: '',
      form: {
        driverName: '',
        driverAddress: '',
        driverIdcard: '',
        driverGender: '',
        driverIntro: '',
        driverIdpic: '',
        driverCarpic: '',
        driverPic: '',
        cityId: '',
        carId: '',
        driverState: '',
        checkState: '',
        driverTell: '',
        handleName: ''
      },
      radio: '',
    }
  },
  //计算属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    upLoadOcr(){
      upLoadOcr(this.form.driverIdpic).then(res => {
         this.form.driverIdcard = res.data.idNumber
         this.form.driverName = res.data.name
         this.form.driverGender = res.data.gender
         this.form.driverAddress = res.data.address
         this.form.driverGender = res.data.gender
        console.log(this.form.driverIdcard)
        queryDriverByIdCard(this.form.driverIdcard).then(res => {
          if (res.data != null) {
            alert('该司机已经注册,请勿重复注册')
          }
        })
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    choiceCar(vehicleId) {
      //console.log(vehicleId)
      this.form.carId = vehicleId
      this.dialogTableVisible = false
      this.isDisabled = false
    },
    selectAllVehicleBaseInfo() {
      selectAllVehicleBaseInfo().then(res => {
        //console.log(res)
        this.carMessage = res.data
        //console.log(this.carMessage)
      })
    },
    getInfo() {
      getInfo().then(res => {
        this.form.handleName = res.data.user.userName
      })
    },
    handlePictureCardPreview(file) {
      this.driverPic = file.url
      this.dialogVisible = true
    },
    success(response, file, fileList) {
      this.form.driverPic = response.data
    },
    handlePictureCardPreview1(file) {
      this.driverIdpic = file.url
      this.dialogVisible1 = true
    },
    success1(response, file, fileList) {
      this.form.driverIdpic = response.data
      this.upLoadOcr()
    },
    handlePictureCardPreview2(file) {
      this.driverCarpic = file.url
      this.dialogVisible2 = true
    },
    success2(response, file, fileList) {
      this.form.driverCarpic = response.data
    },
    onSubmit() {
      console.log(this.form);
      registerDriver(this.form).then(res => {
        //console.log(res);
        alert('申请已提交')
        location.reload()
      })
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）",
  created() {
    this.selectAllVehicleBaseInfo()
    this.getInfo()
    getUserProfile().then(response => {
      this.akaName = response.data.sysUser.nickName
      this.form.driverTell = response.data.sysUser.phonenumber
    })
  },
  //生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
  },
  beforeCreate() {
  }, //生命周期 - 创建之前",
  beforeMount() {
  }, //生命周期 - 挂载之前",
  beforeUpdate() {
  }, //生命周期 - 更新之前",
  updated() {
  }, //生命周期 - 更新之后",
  beforeDestroy() {
  }, //生命周期 - 销毁之前",
  destroyed() {
  }, //生命周期 - 销毁完成",
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发",
}
</script>
<style scoped>

</style>
